<template>
  <div ref="k" class="el-card is-hover-shadow">
    <div class="k-title el-card__header">未归还工具</div>
    <el-table
      ref="tableRef"
      :data="tableData"
      style="width: 100%"
      :height="th"
      @mouseenter="autoScroll(true)"
      @mouseleave="autoScroll(false)"
    >
      <el-table-column
        v-for="item in columns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :formatter="
          row => (item.formatter ? item.formatter(row) : row[item.prop])
        "
        align="center"
      />
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import { noReturnType } from "@/utils/dict";

const props = defineProps({
  data: {
    default: () => [],
    type: Array
  }
});
const tableData = computed(() => {
  return props.data;
});

const columns = [
  { prop: "lendTime", label: "时间" },
  { prop: "toolName", label: "工具名" },
  { prop: "userNickName", label: "用户名" },
  {
    prop: "type",
    label: "未归还类型",
    formatter: row => {
      const temp = noReturnType(row.noReturnType);
      return temp ? temp.name : "";
    }
  }
];

const k = ref(null);
const th = ref(100);
onMounted(() => {
  th.value = k.value.offsetHeight - 35;
});

// 自动滚动
let scrolltimer = null;
const tableRef = ref(null);

const autoScroll = stop => {
  if (!tableData.value.length) {
    return false;
  }
  const tableBody = tableRef.value.$refs.bodyWrapper;
  const divData = tableBody.getElementsByClassName("el-scrollbar__wrap")[0];
  if (divData.scrollHeight == divData.clientHeight) {
    return false;
  }
  if (stop) {
    window.clearInterval(scrolltimer);
  } else {
    const step = 5;
    scrolltimer = window.setInterval(() => {
      divData.scrollTop += step;
      if (
        divData.clientHeight + divData.scrollTop >=
        divData.scrollHeight - 1
      ) {
        divData.scrollTop = 0;
      }
    }, 150);
  }
};
onMounted(() => {
  setTimeout(() => autoScroll(false), 1000);
});
onBeforeUnmount(() => {
  autoScroll(true);
});
</script>
